<template>
    <div id="app">
        <div class="detaile_nav">
            <!--返回按钮-->
            <router-link to="" @click.native="$router.back()" class="iconfont icon-fanhui"></router-link>
            <p id="detaile_top">
                <span>商品</span>
                <span>详情</span>
            </p>
            <!--<router-link to=""></router-link>-->
        </div>
        <!--轮播图部分-->
        <div id="demo" class="carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li v-for="(val,index) in pic[0].lunbo" data-target="#demo" data-slide-to="val.img_id" ></li>
                <!--<li data-target="#demo" data-slide-to="1"></li>-->
            </ul>
            <!-- 图片 -->
            <div class="carousel-inner">
                <div class="carousel-item" :class="val.class" v-for="(val,index) in  pic[0].lunbo">
                    <img :src="val.src">
                </div>
            </div>
            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
        <!--价格销量-->
        <div class="goods_price">
            <div>
                <span>￥{{arr[0].price}}</span>
                <p><span class="iconfont icon-fenxiang"></span>
                    <br>
                    <span style="font-size: 12px">推荐</span>
                </p>
            </div>
            <p><strong>{{arr[0].name}}</strong></p>
            <p>销量 ： 104</p>
        </div>
        <!--产品属性-->
        <div class="goods_attribute">
            <span>商品属性</span>
            <router-link to="">查看全部 > </router-link>
        </div>
        <!--产品说明-->
        <div class="goods_detaile">
            <p><span>产品说明</span></p>
            <p v-for="(val,index) in pic[0].detaile">
                <img :src="val.src" alt="" width="100%">
            </p>
        </div>
        <!--相关产品部分-->
        <div class="goods_rel">
            <p><b>相关产品</b></p>
            <div class="goods_rel_show">
                <router-link to="" class="goods_rel_item">
                    <img src="../../public/img/goods4.jpg" alt="">
                    <p>粉色草莓森林</p>
                    <p>￥199</p>
                </router-link>
                <router-link to="" class="goods_rel_item">
                    <img src="../../public/img/goods5.jpg" alt="">
                    <p>蓝莓拿破仑蛋糕</p>
                    <p>￥199</p>
                </router-link>
                <router-link to="" class="goods_rel_item">
                    <img src="../../public/img/goods6.jpg" alt="">
                    <p>草莓拿破仑蛋糕</p>
                    <p>￥199</p>
                </router-link>
            </div>
            <div class="goods_rel_show">
                <router-link to="" class="goods_rel_item">
                    <img src="../../public/img/goods1.jpg" alt="">
                    <p>粉色草莓森林</p>
                    <p>￥199</p>
                </router-link>
                <router-link to="" class="goods_rel_item">
                    <img src="../../public/img/goods2.jpg" alt="">
                    <p>蓝莓拿破仑蛋糕</p>
                    <p>￥199</p>
                </router-link>
                <router-link to="" class="goods_rel_item">
                    <img src="../../public/img/goods4.jpg" alt="">
                    <p>草莓拿破仑蛋糕</p>
                    <p>￥199</p>
                </router-link>
            </div>
        </div>
        <detaile_bottom></detaile_bottom>
        <!--空盒子-->
        <div class="non"></div>
        <!--<img src="../../public/img/detaile5_1.jpg" alt="">-->
        <!--<img src="../../public/img/detaile5_2.jpg" alt="">-->
        <!--<img src="../../public/img/detaile5_3.jpg" alt="">-->
        <!--<img src="../../public/img/detaile5_4.jpg" alt="">-->
        <!--<img src="../../public/img/detaile5_5.jpg" alt="">-->
    </div>
</template>

<style lang="less" scoped>
    /*头部导航栏*/
    .detaile_nav{
        width: 100%;
        height: 4rem;
        line-height: 2rem;
        padding: 20px;
        background:transparent;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        z-index: 999;
    }
    /*头部返回按钮*/
    .detaile_nav a:first-child{
        flex: 1;
        color: black;
        text-decoration: none;
    }
    /*头部商品和详情部分*/
    .detaile_nav p{
        flex: 6;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    /*头部商品详情部分*/
    .detaile_nav p span{
        flex: 1;
        text-align: center;
    }
    /*右边的三个小点*/
    .detaile_nav a:last-child{
        flex: 2;
    }
    /*主图图片部分*/
    .img{
        width: 100%;
        height: 24rem;
        overflow: hidden;
    }
    .img img{
        width: 100%;
    }
    /*图片上的计数部分*/
    .img span{
        padding: 0 20px;
        background: rgba(0,0,0,.4);
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        position: absolute;
        right: 0;
        top: 300px;
        z-index: 999;
    }
    /*商品详情图片部分*/
    .goods_price{
        padding: 10px 20px;
    }
    .goods_price>div{
        display: flex;
        justify-content: space-between;
    }
    /*价格部分*/
    .goods_price>div>span:first-child{
        font-size: 24px;
        color: red;
    }
    /*商品标题部分*/
    .goods_price p strong{
        font-size: 20px;
    }
    /*分享部分*/
    .goods_price>div>p{
        border-left: 1px solid #bbb;
        padding-left: 20px;
    }
    /*销量部分*/
    .goods_price>p:last-child{
        color: #aaa;
        text-align: right;
    }
    /*商品属性*/
    .goods_attribute{
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        border-top: 15px solid #F2F2F2;
        border-bottom: 15px solid #F2F2F2;
    }
    /*产品说明部分*/
    .goods_detaile p{
        width: 100%;
        padding: 10px 15px 0;
        text-align: center;
    }
    /*产品说明的下划线部分*/
    .goods_detaile p span{
        display: inline-block;
        padding: 0 5px 10px;
        border-bottom: 3px solid orangered;
    }
    /*相关产品*/
   .goods_rel>p{
       padding: 5px 10px;
   }
   /*先关产品展示部分*/
    .goods_rel_show {
        display: flex;
        justify-content: space-between;
    }
    .goods_rel_show a{
        color: black;
    }
    .goods_rel_show .goods_rel_item{
        flex: 1;
        /*width:33% ;*/
        padding:0 10px;
    }
    .goods_rel_show .goods_rel_item img{
        width: 100%;
        border-radius: 10px;
        margin-bottom: 5px;
    }
    /*商品描述部分*/
    .goods_rel_show .goods_rel_item p:nth-child(2){
        font-size: 14px;
    }
    //相关商品盒子
    .non{
        height: 65px;
    }
</style>

<script>
    import bus from '../bus.js'
    import detaile_bottom from '@/components/detaile_bottom.vue'
    export default {
        name:'Car',
        components:{
            detaile_bottom,
        },
        data(){
            return {
                arr:[{name:"发声情人结女神蛋糕",price:199}],
                pic:[
                    {
                        lunbo:[
                            {img_id:0,src:'./img/goods4.jpg',class:'active'},
                            {img_id:1,src:'./img/detaile4_1.jpg',class:''}
                            ],
                        detaile:[
                            {src:'./img/goods4.jpg'},
                            {src:'./img/detaile4_1.jpg'},
                            {src:'./img/detaile4_2.jpg'},
                            {src:'./img/detaile4_3.jpg'},
                            {src:'./img/detaile4_4.jpg'},
                            {src:'./img/detaile4_5.jpg'},
                            {src:'./img/detaile1.jpg'}
                        ]
                    },
        ]
                // 相关商品
                // detaile_rel:{
                //     row1: [
                //         {src: './img/goods4.jpg', name: '粉色草莓森林', price: 199},
                //         {src: './img/goods5.jpg', name: '蓝莓拿破仑蛋糕', price: 199},
                //         {src: './img/goods6.jpg', name: '草莓拿破仑蛋糕', price: 199},
                //     ],
                //     row2: [
                //         {src: './img/goods1.jpg', name: '粉色草莓森林', price: 199},
                //         {src: './img/goods2.jpg', name: '蓝莓拿破仑蛋糕', price: 199},
                //         {src: './img/goods3.jpg', name: '草莓拿破仑蛋糕', price: 199},
                //     ]
                //     }
            }
        },
        methods:{

        },
        mounted(){
            bus.$off('goods');  //销毁
            bus.$on('goods',data=>{
                // console.log(data);
                this.pic[0].lunbo=data.lunbo;
                this.pic[0].detaile=data.detaile;
                this.arr[0].name=data.name;
                this.arr[0].price=data.price;
            })
        }
    }
</script>